import  react, {useEffect, useState, useCallback} from 'react'
import { View, Icon } from '@tarojs/components'
import Taro from '@tarojs/taro';
// import { AtButton, AtSwitch } from 'taro-ui'
import { AtNoticebar, AtDivider } from 'taro-ui';
import { Swiper, SwiperItem } from '@tarojs/components'
import * as _lodash from "lodash";
import './index.scss'
import { HeText, HeTitle, HeImg, HeNoticebar, HeSearch, HeDivider, HeBanner, HeTabNav } from "../hl-widget/components"
import ImgLaoHu from "@/assets/laohu.jpeg";
import ImgNav from "@/assets/nav01.png";


const Index = () => {

  const [assemblyList, setAssemblyList] = useState([])
  const [selectIdx, setSelectIdx] = useState(null)

  // 监听数据
  const listenMessage = (cb, key = "message") => {
    window.addEventListener(key, function (e) {
      _lodash(e, "data.type") == "webpackOk" ?  "": cb(e.data, e);
    }, false);
  }

  // 向编辑器发送
  const sendMessageToEditor = function (message ="message", idx ,origin = "*") {
    console.log("---sendMessage-h5---")
    window.top.postMessage(message, origin);
  }

  const sendMessage = (item, idx) => {
    let obj = {
      item: item,
      type: "edit",
      index: idx
    } as any
    setSelectIdx(idx);
    sendMessageToEditor(obj,idx)
  }
  
  useEffect(() => {
    listenMessage((data, e) => {
      console.log("-----useEffect--h5-");
      console.log(data);
      setAssemblyList(data?.assemblyList || []);
    })
  }, [])

  const delCom = (e, item, idx) => {
    e.stopPropagation();
    let obj = {
      item: item,
      type: "del",
      index: idx
    } as any

    Taro.showModal({
      title: '提示',
      content: '是否删除该组件？',
      success: function (res) {
        if (res.confirm) {
          sendMessageToEditor(obj, idx);
        } else if (res.cancel) {
        }
      }
    })
    // sendMessageToEditor(obj, idx);
  }

  // 渲染器
  const renderCom = (list) => {
    if(list.length < 1) {
      return null;
    }

    // 组件列表
    const handleCom = (item) =>{
      const comTable = {
        HeText: <HeText attrs={item?.data?.resources?.attrs} styles={item?.data?.resources?.styles} value={item?.data?.resources?.value}></HeText>,
        HeTitle: <HeTitle attrs={item?.data?.resources?.attrs} styles={item?.data?.resources?.styles} value={item?.data?.resources?.value}></HeTitle>,
        HeImg: <HeImg styles={item?.data?.resources?.styles}></HeImg>,
        HeNoticebar: <HeNoticebar styles={item?.data?.resources?.styles} value={item?.data?.resources?.value}></HeNoticebar>,
        HeSearch: <HeSearch styles={item?.data?.resources?.styles} value={item?.data?.resources?.value}></HeSearch>,
        HeDivider: <HeDivider styles={item?.data?.resources?.styles}></HeDivider>,
        HeBanner: <HeBanner styles={item?.data?.resources?.styles} attrs={item?.data?.resources?.attrs} list={item?.data?.resources?.list} ></HeBanner>,
        HeTabNav: <HeTabNav styles={item?.data?.resources?.styles} attrs={item?.data?.resources?.attrs} list={item?.data?.resources?.list} ></HeTabNav>

      }
      return comTable[item.component];
    }
    // 加强逻辑判断
    const keys = [
      "HeText", 
      "HeTitle",
      "HeImg",
      "HeNoticebar",
      "HeSearch",
      "HeDivider",
      "HeBanner",
      "HeTabNav"
    ]
    
    let coms = list.map((item, idx) => {
      if(keys.indexOf(item.component) < 0 ) {
        return null
      }
      return (
        <View className='com-rende' key={idx} onClick={() => {sendMessage(item, idx)}}>
          <View className='shape'>
            <View className='shape-dashed'>
              <Icon className='shape-del' onClick={(e) => delCom(e, item, idx)} size='20' type='clear' />
            </View>
            {idx == selectIdx ? <View className='shape-solid'>
              <Icon className='shape-del2' onClick={(e) => delCom(e, item, idx)} size='20' type='clear' />
            </View> : ''}
            {handleCom(item)}
          </View>
        </View>
      )
    })
    return coms;
  }

  return (
    <View className='edit-page'>
      {renderCom(assemblyList)}
      <View>llll</View>

      
    
    {/* 测试导航栏 */}
      {/* <View className='he-nav-all' >
        <View className='he-nav-all-list'>
        
            <View  className='nav-item' >
              <Image className='nav-img' src={ImgNav}></Image>
              <View className='nav-txt' >1234</View>
            </View>

            <View  className='nav-item' >
              <Image className='nav-img' src={ImgNav}></Image>
              <View className='nav-txt' >1234</View>
            </View>

            <View  className='nav-item' >
              <Image className='nav-img' src={ImgNav}></Image>
              <View className='nav-txt' >1234</View>
            </View>
    
        </View>
      </View> */}
      {/* <Image style='width: 100%;height: auto;' src={ImgLaoHu}></Image> */}
      {/* <AtNoticebar icon='volume-plus' customStyle={cssObj} close single showMore marquee moreText='详情' speed={20}>
        这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏
      </AtNoticebar> */}
    </View>
  )
}



export default Index;